<div class="pageContent">
    <div id="toolbar1" class="btn-group mr1" role="group" aria-label="Basic example">
       <button type="button" class="btn btn-success" onclick="product_list_adds()" title="添加"><i class="glyphicon glyphicon-plus"></i></button>
       <button type="button" class="btn btn-violet"  onclick="saveTable1(row,processId)"><i class="glyphicon glyphicon-disk"></i></button>
    </div>
  <table id="productTable1" class="col-xs-8 col-md-6 grid"></table>
</div>
<script>
var  processId;
$(function () {
      processId="{{id}}";
      row =[];
      var oTable1 = new TableInit1();
      oTable1.Init();
})

var TableInit1 = function () {
    var oTableInit1 = new Object();
    //初始化Table
    oTableInit1.Init = function () {
        $('#productTable1').bootstrapTable({
            url: '/product/getParameter',         //请求后台的URL（*）
            method: 'post',                      //请求方式（*）
            toolbar: '#toolbar1',                //工具增删改按钮用哪个容器
            toolbarAlign:'left',
            // searchAlign:'left',
            buttonsAlign:'left',
            striped: false,                      //是否显示行间隔色
            cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
            pagination: true,                   //是否显示分页（*）
            sortable: true,                     //是否启用排序
            sortOrder: "asc",                   //排序方式
            queryParams: oTableInit1.queryParams,//传递参数（*）
            sidePagination: "server",           //分页方式：client客户端分页，server服务端分页（*）
            pageNumber: 1,                       //初始化加载第一页，默认第一页
            pageSize: 10,                       //每页的记录行数（*）
            pageList: [10, 25, 50, 100],        //可供选择的每页的行数（*）
            // search: true,                       //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，没意义
            contentType: "application/x-www-form-urlencoded",
            // strictSearch: true,                 //启用严格搜索
            showColumns: true,                  //是否显示所有的列
            showRefresh: true,                  //是否显示刷新按钮
            minimumCountColumns: 2,             //最少允许的列数
            clickToSelect: true,                //是否启用点击选中行
            height: 700,                        //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
            uniqueId: "no",                     //每一行的唯一标识，一般为主键列
            //showToggle: true,                    //是否显示详细视图和列表视图的切换按钮
            cardView: false,                    //是否显示详细视图
            detailView: false,                   //是否显示父子表
            //showHeader:true,
            //showPaginationSwitch:true,
            buttonsToolba:'#buttons-toolbar', 
            columns: [
            {
                field: 'sort',
                title: '序号',
                sortable:true,
                formatter:xuhao
            },
            {
                field: 'id',
                title: 'id',
                visible:false
            },
            {
                field: 'name',
                title: '产品配置'
            },
            {
                field: 'createDate',
                title: '创建时间'
            },
            {
                field: 'parameter',
                title: '参数',
                formatter:paramsMatter,
                width:500,
                align:'left'
            },
            {
                field: 'operate',
                title: '操作',
                formatter: operateFormatter1 //自定义方法，添加操作按钮
            },
            ],
            onClickCell:function(field,value,row,$element,event){
               if ($element[0].style.width=="500px") {
                    var ss = value.replace(/br/g,'\r\n').replace(/\r\n/g, '<br/>').replace(/\n/g, '<br/>').replace(/\s/g, ' ');
                    $element.css('width','501px');
                    $element.html(ss);
                    return false;
               }else if($element[0].style.width=="501px") {
                    ss =  value.replace(/br/g, '\r\n'); //转换传过来的一条数据
                    var cellData = ss.substring(0,50)+"...";    
                    $element.css('width','500px'); //还原
                    $element.html(cellData);                        //截取50后数据显示，编辑需要传原数据
                    return false;
               }else{
                return ;
               }
            },
            onReorderRowsDrag: function (table, row) {
               //取索引号
               dragbeforeidx = $(row).attr("data-index");
            },
            onReorderRowsDrop: function (table, row) {
               //取索引号
               draglateridx = $(row).attr("data-index");
            },
             onReorderRow: function (newData) {
                 $.each(newData,function(i,item){
                })
                //这里的newData是整个表格数据，数组形式
            if (dragbeforeidx != draglateridx) {//这是我其他地方需要的，你们可不必要这个
             $.post("Sort",
              { jsondata: JSON.stringify(newData) },//将整张表数据Post，当然，先序列化成Json
              function(data) {
               if (data.statusCode == 200) {
              $("#productTable1").bootstrapTable('refresh',{url:"Sort",silent:true,query:{
                  type:1,
                  level:2
                 }});
               }
              });
            }
            }
        });
    };
    //得到查询的参数
    oTableInit1.queryParams = function (params) {
        var process = {};
        process.id = processId;
       //  var temp = {   //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
       //     pageSize: params.limit,   //页面大小
       //     pageCurrent:params.offset,  //页码
       //  };
       // return $.extend({},temp,process);
       return process ;
    };
    return oTableInit1;
};

function xuhao(value, row, index) {//赋予的参数
    return [
        '<a class="btn active"  >'+(index+1)+'</a>' 
    ].join('');
}

function product_list_adds(){
    Ewin.dialog({
        id:'productListAdds',
        url:'/product/list/parameterAdd',
        title:'添加产品参数',
        width:600,
        height:200,
        data:{"pid":processId}
    })
}

function operateFormatter1(value, row, index) {//赋予的参数
    return [
        '<div class="buttonGroup"><a class="btn active editButton"  id="'+index+'" onclick="parameterEdit(event,\''+row.id+'\')"  title="编辑产品参数" ><i class="glyphicon glyphicon-edit"></i>编辑</a><a class="btn active delButton"  onclick="productDelete(event,\''+row.id+'\')" title="删除产品参数"><i class="glyphicon glyphicon-remove"></i>删除</a></div>'   
    ].join('');
}

function paramsMatter(value,row,index){
        var values= row.parameter;
        var ss = values;//用于截取后显示
        if (values) {
            if(values.length>50){ //转换格式
                ss  = values.substring(0,50)+"...";
            }
                return ss;
        }
}

function  productDelete(event,id){
    var data = $("#productTable1").bootstrapTable('getData');
    $(event.target).parent().parent().parent().remove();           //第一步移除dom
    for(var x in data){  
        if(id ==data[x].id){                      
           data.splice(x, 1);
        } 
    }
}

function  parameterEdit(event,id){
        var serial =$(event.target).parent().parent().parent().find("td:first").text(); //序号   给当前行添加serial 保证有值
        var idData;
        var data= $("#productTable1").bootstrapTable('getData');
        var eventId = parseInt($(event.target).attr("id"))+1;     
        var  eventIdLocation = parseInt($(event.target).attr("id")); //
        for(var i=0;i<data.length;i++){
            if(id==data[i].id){      //添加完id没有 与已有对比   id存在
                    data[i].parameter= data[i].parameter.replace(/\r\n/g, 'br').replace(/\n/g, '<br/>').replace(/\s/g, ' ');//先转化下换行符到br
                    idData =data[i]; 
                    break;
            }else{            
                    if(serial ==eventId){  //刚添加完没有id的 还要根据serial定位
                        data[eventIdLocation].parameter= data[eventIdLocation].parameter.replace(/\r\n/g, 'br').replace(/\n/g, '<br/>').replace(/\s/g, ' ');//先转化下换行符到br
                    idData =data[eventIdLocation]; 
                    break;
                    }
            }
        }
        idData.serial=serial;
        Ewin.dialog({
            id:'productParameterEdit',
            url:'/product/list/parameterEdit',
            title:'编辑产品参数',
            width:680,
            height:480,
            data:idData  //里面包含了pid就是上个接口名称为id
        })
}  

function saveTable1(row,processId){               //点击提交表格数据
    var s = $("#productTable1").bootstrapTable('getData'); //加sort
    for(var i=0;i<s.length;i++){
           s[i].parameter  = s[i].parameter.replace(/br/g, '\r\n');
    }

    $.post("/product/saveParameter",
          {pid:processId, parameters: JSON.stringify(s)},//将整张表数据Post，当然，先序列化成Json
          function(data) {
           if (data.statusCode == 200) {
                toastr.success(data.message+'!');
                $("#productTable1").bootstrapTable('refresh',{url:"/product/getParameter",silent:true,query:{type:1,level:2}});
           }
    });
}

</script>